<template>
  <el-dialog
    :visible.sync="visible"
    title="编辑"
    width="800px"
    destroy-on-close
  >
    <el-form
      size="small"
      :model="formData"
      label-position="right"
      label-width="120px"
      :rules="rules"
      ref="formRef"
    >
      <el-row :offset="20">
        <el-col :span="12">
          <el-form-item prop="empeName" label="姓名">
            <el-input
              v-model.trim="formData.empeName"
              style="width: 100%"
              placeholder="请输入"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="empeIdCard" label="身份证">
            <el-input
              v-model.trim="formData.empeIdCard"
              style="width: 100%"
              placeholder="请输入"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="empeGender" label="性别">
            <el-select v-model.trim="formData.empeGender" style="width: 100%">
              <el-option label="男" :value="0"></el-option>
              <el-option label="女" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="empeDuty" label="	应聘岗位">
            <el-input
              v-model.trim="formData.empeDuty"
              style="width: 100%"
              placeholder="请输入"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="empeDegree" label="学历">
            <el-select v-model.trim="formData.empeDegree" style="width: 100%">
              <el-option
                v-for="item in educationalBackgroundList"
                :key="item.codeValue"
                :label="item.codeName"
                :value="item.codeValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="empeCellPhone" label="手机">
            <el-input
              v-model.trim="formData.empeCellPhone"
              style="width: 100%"
              placeholder="请输入"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="empeOrigin" label="籍贯">
            <el-input
              v-model.trim="formData.empeOrigin"
              style="width: 100%"
              placeholder="请输入"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="empeRelation" label="与推荐人关系">
            <el-input
              v-model.trim="formData.empeRelation"
              style="width: 100%"
              placeholder="请输入"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="empeWorkCity" label="办公地点">
            <el-select v-model.trim="formData.empeWorkCity" style="width: 100%">
              <el-option
                v-for="item in officeLocationList"
                :key="item.codeValue"
                :label="item.codeName"
                :value="item.codeValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="empeWorkDate" label="参加工作时间">
            <el-date-picker
              v-model.trim="formData.empeWorkDate"
              style="width: 100%"
              placeholder="请选择"
              value-format="yyyy-MM-dd"
              type="date"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="empeComment" label="推荐理由">
            <el-input
              v-model.trim="formData.empeComment"
              style="width: 100%"
              placeholder="请输入"
              type="textarea"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="footer_box">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading"
        >确认</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import {
  addHandle,
  editHandle,
  getOfficeLocationList,
  getEducationalBackgroundList,
} from '@/api/internalRecommend/index.js'
export default {
  name: 'AddOrEditDialog',
  dicts: ['DEVICE_TYPE'],
  props: {
    type: String,
    successAfter: Function,
  },
  data() {
    return {
      visible: false,
      loading: false,
      formData: {},
      rules: {
        empeName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        empeIdCard: [
          { required: true, message: '请输入身份证', trigger: 'blur' },
          {
            pattern:
              /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: '请输入正确身份证',
            trigger: 'blur',
          },
        ],
        empeCellPhone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确手机号',
            trigger: 'blur',
          },
        ],
        empeGender: [
          { required: true, message: '请选择性别', trigger: 'change' },
        ],
        empeWorkCity: [
          { required: true, message: '请选择办公地点', trigger: 'change' },
        ],
      },
      officeLocationList: [],
      educationalBackgroundList: [],
    }
  },
  methods: {
    handleOpen(row) {
      this.visible = true
      this.formData = row
    },
    async handleSubmit() {
      await this.$refs.formRef.validate()
      this.loading = true
      editHandle(this.formData)
        .then((data) => {
          this.$notify.success(data)
          this.successAfter && this.successAfter()
          this.visible = false
        })
        .finally(() => {
          this.loading = false
        })
    },
    async getOfficeLocation() {
      const res = await getOfficeLocationList()
      this.officeLocationList = res || []
    },
    async getEducationalBackground() {
      const res = await getEducationalBackgroundList()
      this.educationalBackgroundList = res || []
    },
  },
  created() {
    this.getOfficeLocation()
    this.getEducationalBackground()
  },
}
</script>

<style lang="scss" scoped>
.footer_box {
  text-align: right;
}
</style>
